<!-- templates/platform.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        {% load static %}
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>平台界面</title>
        <!-- 加载外部 CSS -->
        <link rel="stylesheet" href="{% static 'css/platform.css' %}">
    </head>
    
<body>

<div class="header">
    <h1>智能穿衣系统</h1>
</div>

<div class="container">
    <!-- 左侧菜单栏 -->
    <div class="sidebar">
        <button onclick="showInfo()">信息管理</button>
        <button onclick="showClothing()">衣库</button>
        <button onclick="showFaceLibrary()">面容库</button>
        <button onclick="showPoseLibrary()">姿态</button>
        <button onclick="window.location.href='{% url 'ai_view'  %}'">智能换装</button>

    </div>

    <!-- 右侧内容区域 -->
    <div id="bp">
        <div class="welcome-section">
            <h2>欢迎使用智能换装平台</h2>
        </div>
        <div class="operation-guide">
            <h2>如何使用智能换装平台</h2>
            <ol>
                <li><strong>第一步：注册并登录</strong> - 创建一个账户并登录到平台，填写个人基本信息（身高、体重、年龄）并上传照片。</li>
                <li><strong>第二步：上传照片</strong> - 上传您的面容、服装和姿态图片，创建属于您的虚拟换装库。</li>
                <li><strong>第三步：选择图片进行换装</strong> - 在平台中选择不同的服装、面容和姿态图片，点击“生成”按钮，查看虚拟试穿效果。</li>
                <li><strong>第四步：保存和分享</strong> - 保存您的换装效果，随时查看并分享您的虚拟穿搭。</li>
            </ol>
        </div>
        <div class="faq-section">
            <h2>常见问题</h2>
            <ul>
                <li>
                    <strong>如何上传服装和面容图片？</strong>
                    <p>在“衣库”和“面容库”部分，点击“上传新图片”按钮，选择您要上传的图片并保存。</p>
                </li>
                <li>
                    <strong>平台支持哪些图片格式？</strong>
                    <p>目前支持 JPEG、PNG 和 GIF 格式的图片。</p>
                </li>
                <li>
                    <strong>生成的换装效果是否能保存？</strong>
                    <p>是的，您可以将生成的换装效果保存到您的个人资料中，方便随时查看。</p>
                </li>
                <li>
                    <strong>如何修改我的个人信息？</strong>
                    <p>在“信息管理”部分，您可以修改您的身高、体重、年龄等个人信息。</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="main-content">
        <h1>欢迎，{{ user.username }}！</h1>
        <p>这是平台的主界面，您可以通过左侧的按钮进入各个模块。</p>

        <!-- 信息管理部分（点击 "信息管理" 按钮时显示） -->
        <div id="info-management" class="section">
            <h2>信息管理</h2>
            <div class="user-info">
                <p>
                    <span><strong>姓名</strong>{{use.name}}</span>
                    <span><strong>身高:</strong> {{ user.height }} cm</span>
                    <span><strong>体重:</strong> {{ user.weight }} kg</span>
                    <span><strong>年龄:</strong> {{ user.age }} 岁</span>
                    <span><strong>性别</strong>{{ user.gender}}</span>

                </p>
                <button onclick="toggleEditForm()">修改</button>
            </div>

            <!-- 修改信息的表单 -->
            <div class="edit-form" style="display:none;">
                <form method="POST">
                    {% csrf_token %}
                    <label for="height">身高:</label>
                    <input type="number" step="0.1" name="height" value="{{ user.height }}" required><br>
                    <label for="weight">体重:</label>
                    <input type="number" step="0.1" name="weight" value="{{ user.weight }}" required><br>
                    <label for="age">年龄:</label>
                    <input type="number" name="age" value="{{ user.age }}" required><br>
                    <button type="submit">保存修改</button>
                    <button type="button" onclick="toggleEditForm()">取消</button>
                </form>
            </div>
        </div>

        <!-- 衣库部分（点击 "衣库" 按钮时显示） -->
        <div id="clothing-library" class="section" style="display:none;">
            <h2>衣库</h2>
            <div class="item-list">
                <h3>您的衣服：</h3>
                {% for clothing in user.clothes.all %}
                    <div class="clothing-item">
                        <img src="{% static clothing.image_path %}" alt="Clothing">
                        <form method="POST" action="{% url 'delete_clothing' clothing.id %}" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit">删除</button>
                        </form>
                    </div>
                {% empty %}
                    <p>暂无衣服图片</p>
                {% endfor %}
            </div>

            <!-- 上传衣服图片 -->
            <button onclick="toggleUploadForm_cloth()">上传新衣服图片</button>
            <div class="upload-form" id="upload-cloth-form">
                <form method="POST">
                    {% csrf_token %}
                    <label for="image_path">图片地址:</label>
                    <input type="text" name="image_path" required><br>
                    <button type="submit" name="clothing">上传</button>
                    <button type="button" onclick="toggleUploadForm_cloth()">取消</button>
                </form>
            </div>
        </div>
        <!-- 面容库部分（点击 "面容库" 按钮时显示） -->
        <div id="face-library" class="section" style="display:none;">
            <h2>面容库</h2>
            <div class="upload-info">
                <p>请确保上传的服装和面容图片清晰，最好为正面照，这样生成的换装效果会更加准确。</p>
            </div>
            
            <div class="item-list">
                <h3>您的面容：</h3>
                {% for face in user.faces.all %}
                    <div class="face-item">
                        <img src="{% static face.image_path %}" alt="Face">
                        <form method="POST" action="{% url 'delete_face' face.id %}" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit">删除</button>
                        </form>
                    </div>
                {% empty %}
                    <p>暂无面容图片</p>
                {% endfor %}
            </div>

            <!-- 上传面容图片 -->
            <button onclick="toggleUploadForm_face()">上传新面容图片</button>
            <div class="upload-form" id="upload-face-form">
                <form method="POST">
                    {% csrf_token %}
                    <label for="image_path">图片地址:</label>
                    <input type="text" name="image_path" required><br>
                    <button type="submit" name="face">上传</button>
                    <button type="button" onclick="toggleUploadForm_face()">取消</button>
                </form>
            </div>
        </div>
        <!---   姿态-->
        <div id="pose-library" class="section" style="display:none;">
            <h2>姿态生成</h2>
            <div class="item-list">
                <h3>您的姿态：</h3>
                {% for pose in user.poses.all %}
                    <div class="pose-item">
                        <img src="{% static pose.image_path %}" alt="Pose">
                        <form method="POST" action="{% url 'delete_pose' pose.id %}" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit">删除</button>
                        </form>
                    </div>
                {% empty %}
                    <p>暂无姿态图片</p>
                {% endfor %}
            </div>

            <!-- 上传姿态图片 -->
            <button onclick="toggleUploadForm_pose()">上传新姿态图片</button>
            <div class="upload-form" id="upload-pose-form">
                <form method="POST">
                    {% csrf_token %}
                    <label for="image_path">图片地址:</label>
                    <input type="text" name="image_path" required><br>
                    <button type="submit" name="pose">上传</button>
                    <button type="button" onclick="toggleUploadForm_pose()">取消</button>
                </form>
            </div>
            <button onclick="window.location.href='{% url 'sk_view' %}'">提取</button> <!-- 添加的提取按钮 -->
        </div>


        
        
        
</div>

<script>
    function showInfo() {
        document.getElementById('info-management').style.display = 'block';
        document.getElementById('clothing-library').style.display = 'none';
        document.getElementById('face-library').style.display = 'none';
        document.getElementById('pose-library').style.display = 'none';
        document.getElementById('bp').style.display = 'none'

    }

    function showClothing() {
        document.getElementById('info-management').style.display = 'none';
        document.getElementById('clothing-library').style.display = 'block';
        document.getElementById('face-library').style.display = 'none';
        document.getElementById('pose-library').style.display = 'none';
        document.getElementById('bp').style.display = 'none'

    }
    function showFaceLibrary() {
        document.getElementById('info-management').style.display = 'none';
        document.getElementById('clothing-library').style.display = 'none';
        document.getElementById('face-library').style.display = 'block';
        document.getElementById('pose-library').style.display = 'none';
        document.getElementById('bp').style.display = 'none'

    }
    function showPoseLibrary() {
        document.getElementById('info-management').style.display = 'none';
        document.getElementById('clothing-library').style.display = 'none';
        document.getElementById('face-library').style.display = 'none';
        document.getElementById('pose-library').style.display = 'block';
        document.getElementById('bp').style.display = 'none'
    }
    function toggleEditForm() {
        const editForm = document.querySelector('.edit-form');
        editForm.style.display = (editForm.style.display === 'none' || editForm.style.display === '') ? 'block' : 'none';
    }
    
    function toggleUploadForm_cloth() {
        const uploadForm = document.getElementById('upload-cloth-form');
        uploadForm.style.display = (uploadForm.style.display === 'none' || uploadForm.style.display === '') ? 'block' : 'none';
    }
    function toggleUploadForm_face() {
        const uploadForm = document.getElementById('upload-face-form');
        uploadForm.style.display = (uploadForm.style.display === 'none' || uploadForm.style.display === '') ? 'block' : 'none';
    }
    function toggleUploadForm_pose() {
        const uploadForm = document.getElementById('upload-pose-form');
        uploadForm.style.display = (uploadForm.style.display === 'none' || uploadForm.style.display === '') ? 'block' : 'none';
    }
        // 获取全屏容器和图片元素
        const fullscreenContainer = document.getElementById('fullscreen-container');
        const fullscreenImage = document.getElementById('fullscreenImage');
        const closeFullscreenButton = document.getElementById('closeFullscreen');
    
        // 为每个图片添加点击事件
        document.querySelectorAll('.item-list img').forEach(image => {
            image.addEventListener('click', () => {
                // 设置全屏图片的 src 为点击的图片地址
                fullscreenImage.src = image.src;
    
                // 显示全屏容器
                fullscreenContainer.style.display = 'flex';
            });
        });
    
        // 关闭全屏图片
        closeFullscreenButton.addEventListener('click', () => {
            fullscreenContainer.style.display = 'none';
        });
    
        // 点击全屏容器的空白区域也关闭全屏
        fullscreenContainer.addEventListener('click', (event) => {
            if (event.target === fullscreenContainer) {
                fullscreenContainer.style.display = 'none';
            }
        }); 
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                fullscreenContainer.style.display = 'none';
            }
        });
</script>

</body>
</html>
